<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>花样</title>
<style type="text/css">
       body{ border:1px solid red;
	         width:310px;
	         height:310px;
			 }
	  .yi{background:#F0F; 
	         color:#FFF; 
			 }
	  .er{background:#F0F;
	      color:#FFF; 
		  position:relative;
	      left:200px; 
		  top:-100px;
		  }
	  .san{background:#F0F;
	       color:#FFF; 
		   position:relative;
		   }
      .si{background:#F0F;
	      color:#FFF; 
		  position:relative;
	      left:200px; 
		  top:-100px;
		  }
	  .wu{background:#F0F;
	      color:#FFF;
		  position:relative;
	      left:100px;
		  top:-300px;
		  }
	  a:hover{ background-color:#00F;
	           text-decoration:none;
			   }
	  a{text-decoration:none; 
	    display:inline-block;
	    width:100px;
		height:100px; 
		border:1px dashed blue;
		} 
	  #title{width: 100px;
	         height: 100px; 
			 border:1px solid red; 
			 line-height: 100px;	     
			 text-align: center;
			 }
</style>
</head>
<body>
     <div id="title">
        <a href="#" class="yi">链接1</a>
        <a href="#" class="er">链接2</a>
        <a href="#" class="san">链接3</a>
        <a href="#" class="si">链接4</a>
        <a href="#" class="wu">链接5</a>
     </div>
</body>
</html>